<template>
  <div class="vip-dnPush-sent">
    <div class="filter-line b-b-d flx-row-s-c">
      <span class="item-name">请求状态</span>
      <span
        v-for="(item, index) in requestStatus"
        :key="item.id"
        class="select-item"
        :class="[index == requestStatusSelect ? 'active' : 'normal']"
        @click="checkedEvent(index)"
      >
        {{ item }}
      </span>
      <span class="item-name">域名</span>
      <Input
          v-model.trim="search"
          placeholder=""
          maxlength="30"
          style="width: 150px"
      />
      <div
          class="user-strong-button line-button-size"
          style="margin: 0 10px 0 30px"
          @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>

    <div class="listTable-area pub-m-t-15">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="c-black f-14"
            >发出的请求列表<span class="c-o"
              >（{{ pageData.total || 0 }}）</span
            ></span
          >
        </div>
        <!-- 表格数据 -->
        <table class="table-area">
          <thead>
            <tr>
              <th>
                <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
              </th>
              <th><div class="line-style">域名</div></th>
              <th><div class="line-style">对方ID</div></th>
              <th><div class="line-style">数量</div></th>
              <th><div class="line-style">成功/失败/总数</div></th>
              <th><div class="line-style">索要金额</div></th>
              <th><div class="line-style">时间</div></th>
              <th><div class="line-style">状态</div></th>
              <th><div class="line-style">操作</div></th>
              <th><div class="line-style">备注</div></th>
            </tr>
          </thead>
          <tbody>
            <tr class="lc-f" v-for="(item, index) in pageData.list" :key="item.id">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f" title="">{{
                      index + 1 + (pageData.page - 1) * pageData.limit
                    }}</span>
                </div>
              </td>
              <td
                style="max-width: 180px; width: 180px; box-sizing: border-box"
              >
                <div class="line-style">
                  <span class="c-o f-ell-sin">{{ item.domainName }}</span>
                </div>
              </td>
              <td
                style="max-width: 120px; width: 120px; box-sizing: border-box"
              >
                <div class="line-style">
                  <span class="normal-f">{{ item.recipientAccount }}</span>
                </div>
              </td>
              <td
                style="
                  max-width: 60px;
                  width: 60px;
                  box-sizing: border-box;
                  cursor: pointer;
                "
              >
                <div class="line-style" @click="showDomain(item.resultList)">
                  <span class="normal-f f-ell-sin">{{ item.count }}</span>
                </div>
              </td>
              <td
                style="
                  max-width: 120px;
                  width: 120px;
                  box-sizing: border-box;
                  cursor: pointer;
                "
              >
                <div class="line-style" @click="showDomain(item.resultList)">
                  <span class="normal-f">{{ item.result }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.amount }}</span>
                </div>
              </td>
              <td
                style="max-width: 155px; width: 155px; box-sizing: border-box"
              >
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ status(item) }}</span>
                </div>
              </td>
              <td style="max-width: 80px; width: 80px; box-sizing: border-box">
                <div class="line-style normal-f">
                  <div
                    class="form-font-button"
                    v-if="item.status === 0"
                    @click="operateEvent(item.id)"
                  >
                    取消
                  </div>
                  <div class="normal-f" v-else>---</div>
                </div>
              </td>
              <td
                style="max-width: 180px; width: 180px; box-sizing: border-box"
              >
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.remark }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 空数据展示 -->
        <Empty-State
          style="background-color: #fff"
          v-if="pageData.total != null && pageData.total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <!-- 分页组件 -->
        <div
          v-if="pageData.total > 0"
          class="form-page-bottom-area flx-row-c-c"
        >
          <Page
            :total="pageData.total"
            :current="pageData.page"
            :page-size="pageData.limit"
            :page-size-opts="pageData.pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>

    <!-- 加载样式 -->
    <!-- <Lodding :loading="loading" /> -->
    <!-- 弹出层展示所有域名信息 -->
    <commonModal
      :show.sync="showBidding"
      :isMask="false"
      :hideCancel="true"
      @confirmEvent="showDomainConfirmEvent"
      @cancelEvent="cancelEvent"
    >
      <template #content>
        <div>
          <div class="list-header">
            <div class="status">状态</div>
            <div class="name">域名</div>
          </div>
          <div class="domain-list">
            <div class="row" v-for="item in resultList" :key="item.domainName">
              <div class="status">{{ pushStatus(item) }}</div>
              <div class="name">{{ item.domainName }}</div>
            </div>
          </div>
        </div>
      </template>
    </commonModal>
    <!-- 确认取消转入操作 -->
    <commonModal
      :content="'您确认取消转入吗？'"
      :show.sync="showBidding2"
      :loading.sync="showLoading"
      @confirmEvent="pushConfirmEvent"
      @cancelEvent="cancelEvent"
    >
    </commonModal>
  </div>
</template>

<script>
import { getPushPageList, postPushEdit } from "@/api/bidding";
import token from "@/utils/token";
import { getStatusText, getPushStatusText } from "@/utils/format";
// import Lodding from "_c/spin/loading";
import commonModal from "_c/modal/commonModal/index";

export default {
  name: "VipDnPushSent",
  components: {
    // Lodding,
    commonModal,
  },
  data() {
    return {
      requestStatus: ["全部", "未接收", "已接收", "已拒绝", "已取消"],
      requestStatusSelect: 0,
      search: "",
      pageData: {
        list: [],
        pageSizeOpts: [10, 15, 20],
        total: 0,
        page: 1,
        limit: 10,
      },
      // loading加载中
      loading: false,
      // 打开弹出层
      showBidding: false,
      // 弹窗展示数据
      resultList: [],
      // 取消转入弹出层
      showBidding2: false,
      // 取消转入弹出层loading
      showLoading: false,
    };
  },
  computed: {
    status() {
      return (val) => {
        return getStatusText(val.status || 0);
      };
    },
    pushStatus() {
      return (val) => {
        return getPushStatusText(val.relationStatus || 0);
      };
    },
  },
  mounted() {
    const { tab } = this.$route.query;
    if (tab) {
      this.requestStatusSelect = parseInt(tab);
    }
    // 判断是否登录
    if (token.get()) {
      this.requestPushPageList();
    }
  },
  methods: {
    reset() {
      this.pageData.page = 1;
      this.pageData.limit = 10;
      this.requestStatusSelect = 0;
      this.search = '';
      this.requestPushPageList();
    },
    // 获取列表数据
    async requestPushPageList() {
      this.loading = true;
      let params = {};
      params.page = this.pageData.page;
      params.limit = this.pageData.limit;
      params.domainName = this.search;
      params.type = 1;
      if (this.requestStatusSelect >= 1) {
        params.status = this.requestStatusSelect - 1;
      }
      const { code, data } = await getPushPageList(params);
      this.loading = false;
      if (code === 200 && data) {
        this.pageData.list = data.list;
        this.pageData.total = data.total;
      }
    },
    // 选择状态
    checkedEvent(val) {
      this.pageData.page = 1;
      this.pageData.limit = 10;
      this.requestStatusSelect = val;
      this.requestPushPageList();
    },
    // 搜索域名
    searchEvent() {
      this.pageData.page = 1;
      this.pageData.limit = 10;
      this.requestPushPageList();
    },
    // 切换页码
    pageChange(page) {
      this.pageData.page = page;
      this.requestPushPageList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageData.limit = pageSize;
      this.pageChange(1);
    },
    // 显示所有域名
    showDomainConfirmEvent() {
      this.showBidding = false;
    },
    // 关闭弹出层
    cancelEvent() {
      this.showBidding && (this.showBidding = false);
      if (this.showBidding2) {
        this.showBidding2 = false;
        this.editId = "";
      }
    },
    // 展示更多域名
    showDomain(val) {
      this.resultList = val;
      this.showBidding = true;
    },
    // 操作事件
    operateEvent(id) {
      this.showBidding2 = true;
      this.editId = id;
    },
    // 确认取消转入操作
    async pushConfirmEvent() {
      const { code } = await postPushEdit({
        domainPushId: this.editId,
        status: 3,
      });
      this.showLoading = false;
      this.showBidding2 = false;
      if (code === 200) {
        this.$Message.success("操作成功!");
        this.requestPushPageList();
      } else {
        this.$Message.warning("操作失败，稍后重试!");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}
.vip-dnPush-sent {
  position: relative;
}
.mg-r-25 {
  margin-right: 25px;
}
.template-icon {
  @include size(16px);
  margin-right: 10px;
  flex-shrink: 0;
}
.c-icon {
  @include bg-setting("t-i-1");
}
.p-icon {
  @include bg-setting("t-i-2");
}
.list-header,
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .status {
    width: 120px;
    text-align: center;
  }
  .name {
    flex: 1;
    text-align: center;
  }
}
.list-header {
  background-color: #eceff3;
  padding: 10px 0;
  .status,
  .name {
    font-size: 16px;
    font-weight: bold;
  }
}
.domain-list {
  height: 200px;
  margin-top: 10px;
  overflow-y: auto;
}
.form-font-button {
  display: inline-block;
  min-width: 60px;

  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
  background-color: $mainColor;
}
</style>
